<template>
	<view class="box">
		<view class="detail">
			<view class="title">等待支付</view>
			<navigator url="../../../address/address">
				<view class="address" v-if="Area == ''">选择收货地址</view>
				<view class="address" v-else>
					<view class="up">姓名：{{Area.name}} 电话号码：{{Area.phoneNumber}}</view>
					<view class="down">收货地址：{{Area.province}}-{{Area.city}}-{{Area.region}}{{Area.detailAddress}}</view>
				</view>
			</navigator>
			
			<view class="card" v-for="item in list">
				<view class="top" >
					<view class="code">订单编号:{{item.orderSn}}</view>
					<view class="state">等待支付</view>
				</view>
				<view class="main">
					<image class="img" :src="item.productPic" mode=""></image>
					<view class="info">
						<view class="p1">
							<view class="info-title">{{item.productName}}</view>
							<view class="price">￥{{item.productPrice}}元</view>
						</view>
						<view class="p2">
							<view class="count">库存</view>
							<view class="number">x{{item.productQuantity}}</view>
						</view>
						<view class="p3" >
							<view v-for="item1 in item.productAttr">
							<text>{{item1.key}} : </text>
							<text>{{item1.value}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="total">合计:{{item.totalPrice}}元</view>
				<view class="btn">
					<view class="confrim" @tap="confirm">确认付款</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getPreOrderById,addConfirmOrder} from "../../../../api/my/index.js"
	import mix from "../../../../mixins/index.js"
	export default {
		mixins:[mix],
		data() {
			return {
				list:[],
				Area:{},
				id:[]
			};
		},
		onShow() {
			var area = uni.getStorageSync("chooseArea")
			this.Area = area
			// console.log(area)
		},
		onLoad(options){
			this.id = options.id
			if(!this.checkLogins()){
				return
			}
			getPreOrderById(options.id).then(res=>{
				console.log(res)
				res.data.orderItems.forEach(ele => {
					ele.productAttr = JSON.parse(ele.productAttr)
				})
				this.list = res.data.orderItems
			})
		},
		methods:{
			confirm(){
				var obj={
					 "addressId": this.Area.id,
					  "orderId": this.id,
					  "orderItemList": [
					    {
					      "productId": this.list.productId,
					      "productQuantity": this.list.productQuantity,
					      "productSkuId": this.list.productSkuId
					    }
					  ]
				}
				addConfirmOrder(obj).then(res=>{
					
				})
				uni.navigateTo({
						url:`../pay/pay?orderId=${this.id}`
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box{
		background-color: #F1ECE7;
		height: 100vh;
		.detail{
			.title{
				font-size: 18px;
				height: 44px;
				line-height: 44px;
				border-bottom: 1px solid #ccc;
				color: #494949;
				margin: 0 30px;
			}
			.address{
				font-size: 14px;
				color: #494949;
				margin: 0 30px;
				padding: 15px 0;
				border-bottom: 1px solid #ccc;
			}
			.card{
				width: 336px;
				padding: 18px;
				margin: 15px auto;
				border-radius: 12px;
				background-color: #fff;
				font-size: 12px;
				color: #3e3e3e;
				.top{
					display: flex;
					justify-content:space-between;
					padding-bottom: 15px;
					border-bottom: 1px solid #f1ece7;
				}
				.main{
					display: flex;
					justify-content: flex-start;
					padding: 15px 0;
					border-bottom: 1px solid #f1ece7;
					.img{
						width: 81px;
						height: 81px;
						background-color: #8f8f94;
					}
					.info{
						width: 235px;
						margin-left: 14px;
						.p1{
							display: flex;
							justify-content: space-between;
							align-items: center;
							line-height: 37px;
						}
						.p2{
							display: flex;
							justify-content: space-between;
							align-items: center;
							font-size: 11px;
							color: #8d8d8d;
							line-height: 15px;
							margin-top: 2px;
						}
						.p3{
							display: flex;
							justify-content: flex-start;
							line-height: 15px;
							margin-top: 2px;
							text{
								padding-left: 4px;
							}
						}
					}
				}
				.total{
					font-size: 13px;
					line-height: 18px;
					margin-top: 7px;
					text-align: right;
				}
				.btn{
					display: flex;
					justify-content: flex-end;
					.confrim{
						width: 62px;
						height: 25px;
						line-height: 25px;
						text-align: center;
						font-size: 13px;
						border-radius: 5px;
						margin-top: 7px;
						color: #2d4f43;
						border: 1px solid #2d4f43;
					}
				}
			}
		}
	}
</style>
